<script setup name="cusTree">
import treeParent from './tree-parents.vue'
import {defineProps, defineEmits, onMounted, nextTick, ref} from "vue";
const treeBodyView = ref(null)
const treeBody = ref(null)
let scaleX = ref(1)
let scaleY = ref(1)
let left = ref(null)
const props = defineProps({
  treeData: {
    type: Object,
    default: () => {
      return {}
    }
  },
})


const emit = defineEmits(['getId'])

const getIdFun = (obj) => {
  emit('getId', obj)
}

onMounted(() => {
  nextTick(() => {
    scaleX.value = treeBody.value.clientWidth / treeBodyView.value.clientWidth
    scaleY.value = treeBody.value.clientHeight / treeBodyView.value.clientHeight
    left.value = `-${treeBody.value.clientWidth / 2}px`
  })
})

</script>

<template>
  <div class="treeBody" ref="treeBody">
    <div class="treeBody_view" ref="treeBodyView" :style="{ }" v-if="props.treeData">
      <treeParent @getId="getIdFun" :treeData="props.treeData"></treeParent>
    </div>
  </div>
</template>

<style scoped lang="scss">
.treeBody {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .treeBody_view {
    transform-origin: left center;
    min-width: 100%;
    width: max-content;
    min-height: 100%;
    height: auto;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
